<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,
		                                     initial-scale=1.0,
		                                     maximum-scale=1.0,
		                                     user-scalable=no">

	<title id="title_head">我爱面试-目录</title>
	<link rel="shortcut icon" href="image/favicon.ico" type=”../image/x-icon” />
	<script src="../code/public_code.js"></script>






	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css"
		  integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

	<link rel="stylesheet" href="css/nav.css">

	<script src="../code/jquery-3.4.1.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
			integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
			crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"
			integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
			crossorigin="anonymous"></script>

	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>


	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		body {
			background-color: #FBFBFB;
		}

		.neiru {
			background-color: #FFFFFF;
		}


		.nav2 img:hover {
			cursor: pointer;
		}

		.meiri div div {
			margin: 20px;

		}

		.meiri div div:hover {
			transform: scale(1.1);
		}


		.suiji ul li:hover {
			background-color: #d0d4df;
			cursor: pointer;
		}

		.zx ul{
			border-radius:6px;
			border: 1px silver solid;
			margin: 10px 15px  25px 15px;
			box-shadow: 1px 1px 5px silver;
			padding: 15px ;
		}
		.zx ul:hover{
			transform: scale(1.02);
			cursor: pointer;
		}

		.fenye img{
			cursor: pointer;
		}
		.fenye span{
			cursor: pointer;
		}
		.youce ul li:hover{
			background-color: #dfd4d5;
			cursor: pointer;
		}

		#sous432:hover{
			cursor:pointer;
		}


		.title1{
			animation: name2 10s linear infinite alternate both;
			cursor: pointer;
		}
		@keyframes name2 {
			0% {

				color: #000000;
			}
			10% {

				color: #9be200;

			}
			20% {

				color: #90d6d6;

			}
			30% {

				color: #dada00;

			}
			40% {

				color: #4ade00;

			}
			50% {

				color: #e699e6;

			}
			60% {

				color: #d6006b;

			}
			70% {

				color: #8c8cd0;

			}
			80% {

				color: #8e46d5;

			}
			90% {

				color: #00b900;

			}

			100% {
				color: #d04500;
			}
		}


		.shous11{
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 20;
			display: none;
		}

		.cxul li{
			border-top:none ;
			border-left:none ;
			border-right:none ;
			margin-top: 10px;

		}
		.cxul li:hover{
			cursor: pointer;
			background-color: #e3e3e3;


		}

		.ul_1 li{
			padding: 25px;
			text-align: center;


		}
		.ul_1 li:hover{
			/*cursor: pointer;*/
			background-color: #fdf9f9;
		}

		.qg{
			width: 0px;
			height: 1px;
			border: 1px silver solid;
			margin: 0 auto;
		}

		#shous{
			/*去除边框*/
			border:none;
			/*去除点击后的边框*/
			box-shadow: 0px 0px 0px 0px;
			/*添加下划线  */
			border-bottom:#8D8D8D 1px solid;
			/*去掉默认背景颜色*/
			-webkit-box-shadow: 0 0 0 1000px white inset;

			color: rgba(110, 107, 94, 0.71);

		}


		#shous::-webkit-input-placeholder {
			/* Chrome/Opera/Safari */
			color: rgba(110, 107, 94, 0.18);
		}

		#itmes-1 li:hover{
			background: #8D8D8D;
		}

	</style>
</head>
<body>


<div id="app">


	<div id="example1" >
		<ul class="nav justify-content-center fixed-top">
			<li  class="nav-item">
				<nav class="menu-activea    d-xl-none d-md-inline-block"  >
					<h1 class="title1" style="background: rgba(239,235,235,0.34)">Menu</h1>
					<ul id="itmes-1" >
						<li v-for="(stu,index) in items" v-on:click="itemslieb1(index)"  v-bind:id="stu.id" >
								{{stu.catalogue_name}}

						</li>

					</ul>
				</nav>
			</li>
			<li class="nav-item">
				<a class="nav-link  title1" href="index.html"  > 我爱面试</a>
			</li>
			<li class="nav-item">
				<!-- Button trigger modal -->
				<img src="image/搜索.png"  width="34" height="34"
					 id="sous432" data-toggle="modal" data-target="#staticBackdrop"/>
			</li>
		</ul>


<div class="container-fluid">
	<br><br><br>

	<!-- Modal -->
	<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
		<div class="modal-dialog modal-dialog-scrollable modal-xl">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="staticBackdropLabel">

						<input id="shous" size="120"  class="form-control form-control-lg" type="text" @input="input_shous()" placeholder="请输入你要查询的内容">

					</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body " >
					<ul class="list-group cxul" >
						<li class="list-group-item" v-for="(item, index) in shous_items">
							<a v-bind:href="item.url_params"  target="_blank" v-html="item.head" class="text-decoration-none text-muted"></a>
						</li>

					</ul>
				</div>
			</div>
		</div>
	</div>

<br/><br/>
	<div class="row ml-xl-4 ">

		<div class="col-xl-9  col-lg-12  neiru shadow p-3 mb-xl-5 bg-white rounded ">

			<p  class="h2 text-center text-secondary " style="margin-bottom: 40px" >{{title}}</p>
<!--每页20-->
			<ul class="list-group ul_1" >
				<li  class="list-group-item text-truncate"   v-for="(stu,index) in contents.list" >
					<a v-bind:href="index_href[index]"  target="_blank"  class="text-decoration-non text-muted">
					{{stu.head}}
					</a>
					<div class="qg"></div>
				</li>

			</ul>


			<div>
				<form class="form-inlineposition-absolute mt-3  fenyefor" style="left: 250px; display: none;" action="#">
					<div class="form-group mb-2">
						<input type="text" readonly class="form-control-plaintext ml-3" id="staticEmail2" value="跳转第几页">
					</div>
					<div class="form-group mx-sm-3 mb-2">
						<label for="inputPassword2" class="sr-only">Password</label>
						<input type="text" class="form-control" id="inputPassword2" placeholder="输入要跳转的页数">
					</div>
					<button type="button" class="btn btn-primary mb-2  ml-3 sub" v-on:click="tj()">提交</button>
				</form>


				<p class="text-center   fenye">

					<img src="image/左.jpg" class="float-left" v-on:click="zuo()" />
					<span class="fye"> <span class="h3 "> {{contents.current_Page}}</span> <span class="h3 "> /</span> <span class="h3 "> {{contents.page_Total__Seize}}</span> </span>
					<img src="image/右.jpg" class="float-right" v-on:click="you()" />
				</p>
			</div>
			</div>






		<!-- 右侧 -->
		<div class="col-3   d-none d-xl-block  mt-3  youce" style="height: 1000px;" class="m-2">
			<div class="text-center " style="right: 100px;">
				<h3>胡安民</h3>
				<img src="image/title-image.jpg" />
				 <p>面试跪,面试一直跪</p>
<!--				<p><span class="font-weight-bold">l</span> love you</p>-->
				<ul class="list-group " id="itmes-2">
					<li v-for="(stu,index) in items" v-bind:id="stu.id" v-on:click="itemslieb2(index)"
						class="list-group-item d-flex justify-content-between align-items-center ">
							<span class="text-truncate d-inline">{{stu.catalogue_name}}</span>
							<span class="badge badge-primary badge-pill">{{stu.catalogue_size}}</span>

					</li>

				</ul>
			</div>
		</div>
	</div>



</div>


</div>



<script>






	var  titleId

	function GetUrlParms()
	{
		var args = new Object();
		var query = location.search.substring(1); //获取查询串
		var pairs = query.split("&"); //在逗号处断开
		for (var i = 0; i < pairs.length; i++)
		{
			var pos = pairs[i].indexOf('='); //查找name=value
			if (pos == -1) continue; //如果没有找到就跳过
			var argname = pairs[i].substring(0, pos); //提取name
			var value = pairs[i].substring(pos + 1); //提取value
			args[argname] = unescape(value); //存为属性
		}
		return args;
	}

	var args = new Object();
	args = GetUrlParms();

	//如果要查找参数key:
	if (args["titleId"] != undefined)
	{
		//如果要查找参数key:
		titleId = args["titleId"];

	}


	var vm = new Vue({
		el:"#app",
		data:{
			items: [],
			index_href: new Array(),
			index_href_list: new Array(),
			contents: {},
			title:"",
			item_id:"",
			shous_items: new Array(),


		},
		created(){

				//设置页面 的标题
			this.$http.get('http://'+http_ip+':8083/feign_title/query_one?titleid='+titleId).then(function (res) {
				$("#title_head").text( res.data.title_name)

				$("#title_head").after("<meta name=\"description\" content=\"简介:"+res.data.title_name+"之目录大纲...\"/>")
			}, function () {
				console.log('请求失败处理');
			});


		console.log(titleId)
			//发送get请求  列表数据
			this.$http.get('http://'+http_ip+':8083/feign_catalogue?titleId='+titleId).then(function (res) {
				this.items = res.data.data;


				console.log(this.items);

				// 设置seo 搜索引擎的 关键字
				var items=""
				for (let i = 0; i <this.items.length ; i++) {
					items+=this.items[i].catalogue_name.trim()+","
				}
				items=items.substring(0,items.length-1)
				$("#title_head").after("<meta name=\"keywords\" content=\""+items+"\"/>")



				this.menu() //手机下拉框
				this.item_id=this.items[0].id


				this.title=this.items[0].catalogue_name
				//发送get请求  分页数据
				this.$http.get('http://'+http_ip+':8083/feign_article/query/1/20?catalogue_id='+this.items[0].id).then(function (res) {
					this. contents = res.data;
					var arr=new Array();
					$.each(this.contents.list,function (i,e) {
						var   str="./context.html?catalogueId="+e.id+""
						arr.push(str);
					})
					this.index_href=arr

				}, function () {
					console.log('请求失败处理');
				});


			}, function () {
				console.log('请求失败处理');
			});

			$(document).scroll(function() {

				console.log("1111")
				var nav = $('nav');
				nav.removeClass('menu-active');

			})

		},
		methods:{
			handleSelect(key, keyPath) {
				console.log(key, keyPath);
			},
			menu:function(){
				var nav = $('nav'),
						menu = $('nav h1'),
						main = $('main'),
						open = false,
						hover = false;

				menu.on('click', function () {
					open = !open ? true : false;
					nav.toggleClass('menu-active');
					main.toggleClass('menu-active');
					nav.removeClass('menu-hover');
					main.removeClass('menu-hover');
					console.log(open);
				});
				menu.hover(
						function () {
							if (!open) {
								nav.addClass('menu-hover');
								main.addClass('menu-hover');
							}
						},
						function () {
							nav.removeClass('menu-hover');
							main.removeClass('menu-hover');
						}
				);
			},
			zuo:function(){

				var zuo=this.contents.page_Up;

				//发送get请求  分页数据
				this.$http.get('http://'+http_ip+':8083/feign_article/query/'+zuo+'/20?catalogue_id='+this.item_id).then(function (res) {
					this. contents = res.data;

					var arr=new Array();
					$.each(this.contents.list,function (i,e) {
						var   str="./context.html?catalogueId="+e.id+""
						arr.push(str);
					})
					this.index_href=arr
				}, function () {
					console.log('请求失败处理');
				});



			},
			you:function(){
				var you=this.contents.page_Dn;
				//发送get请求  分页数据
				this.$http.get('http://'+http_ip+':8083/feign_article/query/'+you+'/20?catalogue_id='+this.item_id).then(function (res) {
					this. contents = res.data;
					var arr=new Array();
					$.each(this.contents.list,function (i,e) {
						var   str="./context.html?catalogueId="+e.id+""
						arr.push(str);
					})
					this.index_href=arr
				}, function () {
					console.log('请求失败处理');
				});

			},
			tj:function(){

				var aa = $("#inputPassword2").val();
				//发送get请求  分页数据
				//
				this.$http.get('http://'+http_ip+':8083/feign_article/query/'+aa+'/20?catalogue_id='+this.item_id).then(function (res) {
					this. contents = res.data;
					var arr=new Array();
					$.each(this.contents.list,function (i,e) {
						var   str="./context.html?catalogueId="+e.id+""
						arr.push(str);
					})
					this.index_href=arr
				}, function () {
					console.log('请求失败处理');
				});

			},
			index:function () {

				location.href="index.html"

			},
			itemslieb1:function (e) {

				var id=$("#itmes-1 li:eq("+e+")").attr("id")

				this.item_id=id
				this.title=$("#itmes-1 li:eq("+e+")").text()
				this.contents=[];
				//发送get请求  分页数据
				this.$http.get('http://'+http_ip+':8083/feign_article/query/1/20?catalogue_id='+id).then(function (res) {
					this. contents = res.data;

					var arr=new Array();
					$.each(this.contents.list,function (i,e) {
						var   str="./context.html?catalogueId="+e.id+""
						arr.push(str);
					})
					this.index_href=arr
				}, function () {
					console.log('请求失败处理');
				});


			},
			itemslieb2:function (e) {

				var id=$("#itmes-2 li:eq("+e+")").attr("id")
				this.item_id=id
				this.title=$("#itmes-2 li:eq("+e+") span:eq(0)").text()

				this.contents=[];
				//发送get请求  分页数据
				this.$http.get('http://'+http_ip+':8083/feign_article/query/1/20?catalogue_id='+id).then(function (res) {
					this. contents = res.data;
					var arr=new Array();
					$.each(this.contents.list,function (i,e) {
						var   str="./context.html?catalogueId="+e.id+""
						arr.push(str);
					})
					this.index_href=arr
				}, function () {
					console.log('请求失败处理');
				});


			},
			input_shous:function(){

				var shous=  $("#shous").val()
				if(shous.trim()==""){
					return;
				}

				this.$http.get('http://'+http_ip+':8083/feign_solr?title='+shous).then(function (res) {
					this.shous_items= $.parseJSON(res.bodyText)
					for (let i = 0; i <this.shous_items.length ; i++) {
						this.shous_items[i].url_params = "context.html?"+this.shous_items[i].url_params
					}

					console.log( this.shous_items[0].url_params)

				}, function () {
					console.log('请求失败处理');
				});


			}
		}
	})

</script>

<script>


	$(function() {

		$(".container-fluid").click(function() {
			var nav = $('nav');
			nav.removeClass('menu-active');
		})


		$(".fye").click(function() {
			$(".fenyefor").show()
		})

		$(".sub").click(function() {
			$(".fenyefor").hide()
		})

	})


	$(function() {
		var content_arr = []; //定义一个空数组
		$('.card-text').each(function() { //遍历box内容
			var content = $.trim($(this).text()); //去掉前后文空格
			content_arr.push(content); //内容放进数组
		})
		for (var i = 0; i < content_arr.length; i++) { //遍历循环数组
			if (content_arr[i].length >= 75) { //如果数组长度（也就是文本长度）大于等于75（数字可自己定义）
				content = content_arr[i].substr(0, 75) + '...'; //添加省略号并放进box文字内容后面
				$(".card-text").eq(i).text(content);
			} else {
				content = content_arr[i];
				$(".card-text").eq(i).text(content);
			}
		}
	})

			$(".ul_1 li").click(function (e) {
				var index=$(e.target).index();
			})





</script>

</body>
</html>
